<template>
  <div id="myPie1" :style="{ width: '330px', height: '220px' }"></div>
</template>

<script>
export default {
  name: 'pie1',
  props: {
    pie1data: {
      type: Array,
      default: function() {
      return []
      }
    }
  },
  data() {
    return {};
  },
  watch:{
    // 实时监控
    pie1data(){
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let pie1 = this.$echarts.init(document.getElementById("myPie1"));
      pie1.setOption({
        title: {
        //   text: "某站点用户访问来源",
        //   subtext: "纯属虚构",
          left: "center",
        },
        color: ['#3168c3', '#4fade0', '#9ad4e0'],
        tooltip: {
          trigger: "item",
        },
        // 侧边标题
        // legend: {
        // //   orient: "vertical",
        // //   left: "left",
        // },
        series: [
          {
            name: "评估结果",
            type: "pie",
            radius: "50%",
            data: this.pie1data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>